import { useEffect, useRef } from "react";
import {
    ArcRotateCamera, Color4, Engine, HemisphericLight, Mesh, MeshBuilder, Plane, Scene, UniversalCamera,
    StandardMaterial, Vector3, Color3, DirectionalLight, Animation, CircleEase, EasingFunction, VertexBuffer, BackgroundMaterial, Texture, Ray, Matrix, RayHelper, Vector4, SpriteManager,
} from '@babylonjs/core';
import Play from '../component/Player';
import { applyMatrix4, getDefaultMatrix } from '../component/MathLib';


const canvas = document.createElement("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const engine = new Engine(canvas, true);
const scene = new Scene(engine);

const camera = new UniversalCamera('Camera', new Vector3(0, 10, 0), scene);
camera.setTarget(new Vector3(0, 0, 0));
camera.attachControl(canvas, true);

const play = new Play(camera);
play.start();

const updateAction: ((time: number) => {})[] = [];

const light = new HemisphericLight('pxg', new Vector3(1, 1, 0), scene);
const ground = MeshBuilder.CreateGround('ground', { width: 8, height: 8, updatable: true }, scene);


//没看懂
const spriteManager = new SpriteManager('spriteManager', '../image/image01.png', 100, { width: 64, height: 64 }, scene);


updateAction.push((time) => {


    return '';
});



const RenderStructure = () => {
    const divRef = useRef<HTMLDivElement>(null);
    useEffect(() => {
        const { current } = divRef;
        if (current != null) {
            current.innerHTML = '';
            current.append(canvas);
            ani(0);
        }
    }, []);
    return (
        <div ref={divRef}></div>
    );
};

export default RenderStructure;

function ani(time: number) {
    updateAction.forEach((action) => {
        action(time);
    })
    scene.render();


    requestAnimationFrame(ani);
}